<template>
  <div class="login-containers">
    <div class="login-container">
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <div class="title">{{ title }}</div>
        <!--手机号-->
        <el-form-item prop="username" class="!mb-10">
          <el-input
            v-model="loginForm.username"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="请输入手机号码"
          >
            <template #prefix>
              <!-- <el-icon><User /></el-icon> -->
              <div>手机号</div>
            </template>
          </el-input>
        </el-form-item>
        <!--数字验证码-->
        <!-- <el-form-item prop="code" class="!mb-10">
          <div class="w-full flex items-center justify-between">
            <el-input
              class="!w-4/6"
              v-model="loginForm.code"
              type="code"
              size="large"
              auto-complete="off"
              placeholder="请输入数字验证码"
              @keyup.enter="handleLogin"
            >
              <template #prefix>
                <div>数字验证</div>
              </template>
            </el-input>
            <img class="code-img" src="/src/assets/images/login/loginNbg.png" alt="" />
          </div>
        </el-form-item> -->
        <!--获取验证码-->
        <el-form-item prop="code">
          <div class="w-full flex items-center justify-between">
            <el-input
              v-model="loginForm.code"
              class="!w-4/6"
              type="code"
              size="large"
              auto-complete="off"
              placeholder="请输入验证码"
              @keyup.enter="handleLogin"
            >
              <template #prefix>
                <div>验证码</div>
              </template>
            </el-input>
            <el-button
              v-if="isGetCode"
              class="btn-height"
              :disabled="!loginForm.username"
              type="primary"
              @click="getMobileCode"
            >
              获取验证码
            </el-button>
            <div v-if="!isGetCode">
              <el-button type="primary">{{ timer }}s</el-button>
            </div>
          </div>
        </el-form-item>
        <div class="mt-20">
          <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住账号</el-checkbox>
          <el-form-item style="width: 100%">
            <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import Cookies from 'js-cookie'
import useUserStore from '@/store/modules/user'
import { getCode } from '@/api/login'
const userStore = useUserStore()
const router = useRouter()
const { proxy } = getCurrentInstance() as any

const title = ref('闲闲管理后台' + import.meta.env.VITE_APP_TITLE)

const loginForm = ref({
  username: 'admin',
  code: '',
  rememberMe: true,
})

const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  code: [{ required: true, trigger: 'blur', message: '请输入您的验证码' }],
}

const loading = ref(false)
const redirect = ref(undefined)

function handleLogin() {
  proxy.$refs.loginRef.validate((valid: any) => {
    if (valid) {
      loading.value = true
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set('username', loginForm.value.username, { expires: 30 })
        Cookies.set('rememberMe', `${loginForm.value.rememberMe}`, { expires: 30 })
      } else {
        // 否则移除
        Cookies.remove('username')
        Cookies.remove('rememberMe')
      }
      // 调用action的登录方法
      userStore
        .login(loginForm.value)
        .then(() => {
          router.push({ path: redirect.value || '/' })
        })
        .catch(() => {
          loading.value = false
        })
    }
  })
}

function getCookie() {
  const username = Cookies.get('username')
  const rememberMe = Cookies.get('rememberMe')
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    code: '',
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
  }
}

getCookie()

const count = ref<null | number>(null)
const TIME_COUNT = ref(60)
const isGetCode = ref(true)
const timer = ref()
// 获取手机验证码
function getMobileCode() {
  getCode(loginForm.value.username)
  isGetCode.value = false
  if (!count.value) {
    timer.value = TIME_COUNT.value
    count.value = window.setInterval(() => {
      if (timer.value > 0 && timer.value <= TIME_COUNT.value) {
        timer.value--
      } else {
        isGetCode.value = true
        clearInterval(count.value as number)
        count.value = null
      }
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.login-containers {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('/src/assets/images/login/loginBack.png') round no-repeat;
  background-size: 100% 100%;
}
.login-container {
  position: relative;
  width: 1312px;
  height: 738px;
  background: red;
  background: url('/src/assets/images/login/loginCenterBack.png') round no-repeat;
  background-size: 100% 100%;
}
.title {
  margin: 0px auto 30px auto;
  color: #707070;
  font-size: 25px;
  color: #2e85ff;
  margin-bottom: 100px;
}

.login-form {
  position: absolute;
  right: 6%;
  padding: 0px 30px 0px 30px;
  box-sizing: border-box;
  bottom: 0px;
  top: 56px;
  // transform: translateY(-50%);
  width: 442px;
  height: 600px;
  overflow: hidden;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 40px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 40px;
  padding-left: 12px;
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .login-form {
    right: 70px;
  }

  .login-container {
    transform: scale(0.85);
  }
}

@media screen and (max-width: 1024px) {
  .login-form {
    transform: scale(0.7);
    top: -10px;
    right: 0px;
  }

  .login-container {
    width: 984px;
    height: 553.5px;
    transform: scale(0.9);
  }

  .title {
    margin-bottom: 53px;
  }
}
.btn-height {
  height: 40px;
}
.code-img {
  height: 40px;
  width: 102px;
}

.codeBox {
  cursor: pointer;
  height: 58px;
  width: 150px;
  border-radius: 33px;
  text-align: center;
  line-height: 58px;
  background: #2e85ff;
  color: #fff;
  margin-left: 20px;
  border: none;
}
</style>
